<template>
	<view class="home">
		<view class="top">
			<text style="margin-bottom: 10rpx;">今日倒计时</text>
			<CountDown :endDate="tomorrowDate" @timeout="handleTimeout"></CountDown>
		</view>
		<DeTabs :underLinePadding="0" :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick'></DeTabs>
		<view class="content" v-if="defaultIndex === 0">
			<text class="title">
				{{todayPlanObj.title || '今日计划'}}
			</text>
			<text class="detail">
				{{todayPlanObj.content || '暂未制定计划哦～'}}
			</text>
			<view class="operate">
				<view >
					<button class="cu-btn line-green" style="margin-right: 10rpx;" :disabled="todayPlanObj.state === '1' ? true : false" @click="sureDonePlan">{{todayPlanObj.state === '1' ? '已完成' : '确认完成'}}</button>
					<!-- <button class="cu-btn line-blue" @click="turnToTomorrow">转至明日</button> -->
				</view>
				<text style="color: #999;">{{todayDate}}</text>
			</view>
		</view>
		<view class="content" v-else>
			<text class="title">
				{{tomorrowPlanObj.title || '明日计划'}}
			</text>
			<text class="detail">
				{{tomorrowPlanObj.content || '暂未制定计划哦～'}}
			</text>
			<text style="color: #999; padding: 10rpx 0;">{{tomorrowDate}}</text>
		</view>
	</view>
</template>

<script>
import moment from 'moment'
// import {mapActions} from 'vuex'
import {getRequest} from '../../https.js'

import CountDown from '../../components/CountDown.vue'
import DeTabs from '../../components/DeTabs.vue'

export default {
	data() {
		return {
			todayDate: '',
			tomorrowDate: '',
			todayPlanObj: {},
			tomorrowPlanObj: {},
			
			tabs: [
				{
					text: '今日计划'
				},
				{
					text: '明日计划'
				}
			],
			defaultIndex: 0,
		}
	},
	mounted() {
		this.getDate()
		this.getTodayPlan()
		this.getTomorrowPlan()
	},
	onShow() {
		this.getDate()
		this.getTodayPlan()
		this.getTomorrowPlan()
	},
	components: {
		CountDown,
		DeTabs
	},
	methods: {
		// ...mapActions({
		// 	saveTodayPlan: 'setTodayPlanActions'
		// }),
		getDate(){
			this.todayDate = moment().format('YYYY-MM-DD')
			this.tomorrowDate = moment().add(1, 'days').format('YYYY-MM-DD')
		},
		handleTimeout(){
			this.getDate()
			this.getTodayPlan()
			this.getTomorrowPlan()
		},
		getTodayPlan(){
			getRequest('phpbin/tomorrowplan/getPlanList.php', {
					date: this.todayDate
				}
			).then(res => {
				if (res.data.content.list.length !== 0) {
					this.todayPlanObj = res.data.content.list[0]
					// this.saveTodayPlan(res.data.content.list[0])
				}else{
					this.todayPlanObj = {}
				}
			})
		},
		getTomorrowPlan(){
			getRequest('phpbin/tomorrowplan/getPlanList.php', {
					date: this.tomorrowDate
				}
			).then(res => {
				if (res.data.content.list.length !== 0) {
					this.tomorrowPlanObj = res.data.content.list[0]
				}else{
					this.tomorrowPlanObj = {}
				}
			})
		},
		sureDonePlan(){
			uni.showModal({
				title: '真的按计划完成了吗？',
				content: '提交后无法修改',
				cancelText: '骚凹瑞',
				confirmText: '完成',
				success: result => {
					if(result.confirm){
						if (moment().format('YYYY-MM-DD') !== this.todayDate) {
							uni.showToast({
								title: '骚凹瑞～没有按时完成哦～穷哈！',
								icon: 'none',
							})
							return
						}
						getRequest('phpbin/tomorrowplan/updatePlan.php', {
								date: this.todayDate
							}
						).then(res => {
							uni.showToast({
								title: '恭喜！完成了今日计划！再接再厉呦～'
							})
							this.getTodayPlan()
						})
					}
				},
				fail: () => {},
				complete: () => {}
			})
		},
		turnToTomorrow(){
			uni.switchTab({
				url: '../add/index'
			})
		},
		tabClick(e){
			this.defaultIndex = e
		}
	}
}
</script>

<style lang="scss">
.home {
	display: flex;
	flex-direction: column;
	height: 100%;
	.top{
		background-color: rgb(253, 246, 236);
		padding: 40rpx;
		padding-top: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.content{
		margin: 40rpx;
		padding: 40rpx;
		background-color: rgb(253, 246, 236);
		flex: 1;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		.title{
			padding: 20rpx 0;
			font-weight: bold;
			font-size: 16px;
		}
		.detail{
			border-bottom: 1px solid #ccc;
			border-top: 1px solid #ccc;
			padding: 20rpx 0;
		}
		.operate{
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}
</style>
